<template>
  <div class="page-base">
    <!-- 导航区 -->
    <div class="navigate">
      <div class="title" style="justify-content: center; display: flex">
        <img style="width: auto; max-height: 35px" src="/logo.png" />
        <div style="margin-left: 15px">欢迎使用</div>
      </div>
      <!-- <RouterLink replace to="/main/page1" :class="{ active: route.path && route.path.toString().startsWith('/main') }">
        首页</RouterLink>
      <RouterLink to="/setting" active-class="active">系统配置</RouterLink>
      <RouterLink to="/privacy" active-class="active">隐私政策</RouterLink>
      <RouterLink to="/about" active-class="active">关于我们</RouterLink> -->
      <MySliderItem title="首页" path="/main/page1" pathActive="/main" :curPath="route.path" />
      <hr />
      <MySliderItem title="设备统计" path="/setting" :curPath="route.path" />
      <MySliderItem title="版本管理" path="/privacy" :curPath="route.path" />
      <MySliderItem title="异常上报" path="/about" :curPath="route.path" />
    </div>
    <!-- 展示区的根容器 -->
    <div class="main-base">
      <!-- 展示区的标题 -->
      <div class="main-title">
        <div>{{ getName() }}</div>
        <div style="flex: 1;text-align: end;">
          <!--实现逻辑在apphelp/comutils.js的'function logoutAction'-->
          <button class="logoutStyle" @click="logoutClick()">退出登录</button>
        </div>
      </div>
      <!-- 展示区的内容 -->
      <div class="main-content">
        <!--把路由页面装载在这里-->
        <RouterView />
      </div>
    </div>
  </div>
</template>
<!--=========================————————————=========================-->
<!--=========================    逻辑    =========================-->
<!--=========================————————————=========================-->
<script lang="ts" setup name="LoginPage">
import { useRoute } from 'vue-router'
import { logout, getName } from '../stores/loginStore'
import { onMounted } from 'vue'
import { showTipDialog } from '@/components/components/tipdialog/tip-dialog'
import MySliderItem from '@/components/MySliderItem.vue'

const route = useRoute()
onMounted(() => { })
async function logoutClick() {
  const r = await showTipDialog({ title: '是否退出登录?' })
  if (r) {
    logout()
  }
}
</script>
<!--=========================————————————=========================-->
<!--=========================    样式   =========================-->
<!--=========================————————————=========================-->
<style lang="css" scoped>
/*样式 */
.navigate {
  display: flex;
  /* 垂直排列 */
  flex-direction: column;
  width: 18%;
  background-color: var(--main-color6);
  overflow-y: auto;
  height: 100vh;
}

.navigate-title {
  position: sticky;
  text-align: center;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
  font-weight: bolder;
}

.navigate-content {
  /* 占满剩余控件 */
  flex: 1;
  /* 防止内容溢出父容器 */
  overflow: hidden;
  /* 内部启用垂直滚动 */
  overflow-y: auto;
  /*隐藏滚动条 */
  scrollbar-width: none;
}

/*展示区的跟容器，也就是最外出的div，包含标题和内容 */
.main-base {
  /* background-color: var(--main-color8); */
  justify-content: space-between;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/*展示区的标题 */
.main-title {
  display: flex;
  text-align: center;
  align-items: center;
  word-spacing: 5px;
  height: var(--base-bar-height);
  line-height: var(--base-bar-height);
  font-size: medium;
  background-color: var(--main-color6);
}

.main-title .left {
  flex: 1;
  display: flex;
  text-align: center;
  align-items: center;
  text-align: start;
  overflow: hidden;
  /* 内容溢出时隐藏 */
  text-overflow: ellipsis;
  /* 文本溢出时显示省略号 */
  white-space: nowrap;
  /* 文本不换行 */
}

.main-title .right {
  flex: 1;
  text-align: end;
}

/*展示区的内容 */
.main-content {
  /*父控件设置display: flex;设置这个就能占满剩余的宽度 */
  flex: 1;
  /* border: var(--main-color) 1px solid; */
  padding: 0px;
  /* 超出时滚动（必须设置这个，否则子页面也无法滚动） */
  overflow-y: auto;
  overflow: hidden;
}
</style>
